<template>
  <div class="Welcome">
    <div class="title-name">
      <v-icon color="#fff"
              style="vertical-align:middle; margin-right:8px">menu</v-icon>
      <span style="font-size:20px;line-hight:24px;vertical-align:middle;color:#fff">太理拾课</span>
    </div>
    <div class="Welcome-main">
      <h3 class="time">{{date}} 第{{week}}周</h3>
      <div class="main">
        <div class="title">
          <div style="float:left">
            <h1 style="font-size:1.6rem;letter-spacing: 2px;margin-top:5px">你好,胡文浩!</h1>
            <span>这里是你的太理拾课</span>
          </div>
          <div class="header-account"
               @click="tologin()">
            <v-icon x-large>account_circle</v-icon><br>
            <span>已登录</span>
          </div>
        </div>
        <div class="course">
          <div class="course-main"
               v-for="(val,key) in courses"
               :key="key">
            <div class="course-time">
              <i id="circle"></i>
              <i id="line"></i>
              <i id="circle"></i>
              <i id="line"></i>
              <br />
            </div>
            <span>第{{key}}节</span>
            <div class="course-title">
              <h3>{{val[0]}}</h3>
              <span>{{val[2]}} {{val[3]}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  data () {
    return {
      name: 'Welcome',
      token: '',
      date: '',
      week: '',
      courses: [['暂无数据']]
    }
  },
  created () {
    var that = this
    var storage = window.localStorage
    var localToken = storage.getItem('token')
    if (localToken == null) {
      console.log('未登陆')
    } else {
      that.token = localToken
      var data = {
        token: localToken
      }
      // var that = that
      this.$axios({
        method: 'POST',
        url: '/kcb',
        data,
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Content-Type': 'application/json'
        }
      })
        .then(function (response) {
          console.log(response)
          if (response.data.state == 200) { // eslint-disable-line eqeqeq
            // 获取本周数
            // var week = response.data.message.week
            var week = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0]
            that.week = week.findIndex(n => n == 1) + 1 // eslint-disable-line eqeqeq

            // 获取今天日期
            var date = new Date()
            var w = date.getDay()
            that.date = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate().toString()

            // 处理今天课程信息
            var msg = response.data.message
            var courses = msg[w - 1]
            that.courses = courses
          } else {
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  },
  methods: {
    tologin () {
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
* {
  margin: 0px;
}
.title-name {
  padding: 20px;
  background: #000;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
  height: 400px;
  background-image: url(../assets/welcome-img.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: fixed;
}
.Welcome-main {
  top: 280px;
  position: relative;
  z-index: 2;
}
.main {
  height: 600px;
  background-color: #fff;
  border-radius: 12px;
  padding: 10px 24px 70px 24px;
}
.time {
  color: #fff;
  width: 100%;
  text-align: end;
  padding: 5px 20px;
  text-shadow: 2px 2px 20px #000;
}
.title {
  margin-top: 10px;
  height: 90px;
  box-sizing: border-box;
}
.header-account {
  float: right;
  text-align: center;
}
.header-account > * {
  color: #2a2a2a;
}
.home-img {
  border-radius: 12px;
  margin: 24px 0px 24px 0px;
}
span {
  font-size: 12px;
}
.grade::-webkit-scrollbar {
  display: none;
}
.course-main {
  overflow: hidden;
  margin: 0px 0px 0px 0px;
}
.course-time {
  width: 10%;
  height: 90px;
  float: left;
  font-size: small;
  margin: 10px 5% 10px 0px;
}
.course-title {
  width: 85%;
  height: 80px;
  float: left;
  color: #fff;
  background-color: #2c2933;
  border-radius: 12px;
  padding: 14px 0px;
  text-align: center;
}
#circle {
  background: rgb(33, 33, 33);
  border: 1px solid rgb(33, 33, 33);
  border-radius: 10px;
  width: 10px;
  height: 8px;
  display: block;
  margin-bottom: 18px;
}
#line {
  background: rgb(33, 33, 33);
  border: 1px solid rgb(33, 33, 33);
  border-radius: 10px;
  width: 16px;
  height: 8px;
  display: block;
  margin-bottom: 18px;
}
</style>
